<template>
  <view class="page bg-white">
    <view class="main">
      <!-- 教师名称 -->
      <u-text color="#333" size="32rpx" text="教师名称" bold></u-text>
      <view class="margin-top-sm">
        <u-input placeholder="请输入教师名称" v-model="formData.teacherName"></u-input>
      </view>

      <!-- 教师性别 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="选择教师性别" bold></u-text>
      <view class="margin-top-sm">
        <up-radio-group gap="40rpx" size="32rpx" v-model="formData.teacherGender">
          <up-radio labelSize="32rpx" active-color="#FFB74D" v-for="(item, index) in sexOptions" :key="item.value"
            :label="item.label" :name="item.value" />
        </up-radio-group>
      </view>

      <!-- 教师联系方式 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="教师联系方式" bold></u-text>
      <view class="margin-top-sm">
        <u-input placeholder="请输入教师联系方式" v-model="formData.teacherPhone"></u-input>
      </view>

      <!-- 紧急联系人	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="紧急联系人" bold></u-text>
      <view>
        <view class="flex gap margin-top-sm" v-for="(item, index) in formData.guardians" :key="index">
          <view style="flex:0.8">
            <u-input customStyle="height:80rpx;border-radius:20rpx" fontSize="32rpx"
              v-model="formData.guardians[index].name" placeholder="紧急联系人称呼"></u-input>
          </view>
          <view class="flex-1">
            <u-input customStyle="height:80rpx;border-radius:20rpx" fontSize="32rpx"
              v-model="formData.guardians[index].phone" placeholder="紧急联系人联系方式"></u-input>
          </view>
        </view>
        <view class="margin-top-sm">
          <u-button size="large" shape="circle" :color="themeTertiary"
            :customStyle="{ fontSize: '30rpx', color: themePrimary }" text="新增" @click="addGuardian"></u-button>
        </view>
      </view>

      <!-- 入职日期 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="入职日期" bold></u-text>
      <view class="form-item flex-1" @click="showStartDate = true">
        <u-text :text="formData.startDate ? dayjs(formData.startDate).format('YYYY-MM-DD') : '请选择入职日期'" size="32rpx"
          :color="formData.startDate ? '#333' : '#999'"></u-text>
        <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 职务	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="职务" bold></u-text>
      <view class="form-item" @click="showJobPopup = true">
        <u-text :text="formData.job ? formData.job : '请选择职务'" size="32rpx"
          :color="formData.job ? '#333' : '#999'"></u-text>
        <u-icon name="arrow-down" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 岗位类型	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="岗位类型" bold></u-text>
      <view class="form-item" @click="showJobTypePopup = true">
        <u-text :text="formData.jobType ? formData.jobType : '请选择岗位类型'" size="32rpx"
          :color="formData.jobType ? '#333' : '#999'"></u-text>
        <u-icon name="arrow-down" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 任教学科	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="任教学科" bold></u-text>
      <view class="form-item" @click="showSubjectPopup = true">
        <u-text :text="formData.subject ? formData.subject : '请选择任教学科'" size="32rpx"
          :color="formData.subject ? '#333' : '#999'"></u-text>
        <u-icon name="arrow-down" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 教学年级	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="教学年级" bold></u-text>
      <view class="form-item" @click="showGradePopup = true">
        <u-text :text="formData.grade ? formData.grade : '请选择教学年级'" size="32rpx"
          :color="formData.grade ? '#333' : '#999'"></u-text>
        <u-icon name="arrow-down" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 责任班级	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="责任班级" bold></u-text>
      <view class="form-item" @click="showResponsibleClassPopup = true">
        <u-text :text="formData.class ? formData.class : '请选择责任班级'" size="32rpx"
          :color="formData.class ? '#333' : '#999'"></u-text>
        <u-icon name="arrow-down" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 教师照片	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="教师照片" bold></u-text>
      <view>
        <UploadBox placeholder="点击上传照片" />
      </view>

      <!-- 教师出生日期	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="教师出生日期" bold></u-text>
      <view class="form-item" @click="showBirthdate = true">
        <u-text :text="formData.birthday ? dayjs(formData.birthday).format('YYYY-MM-DD') : '请选择教师出生日期'" size="32rpx"
          :color="formData.birthday ? '#333' : '#999'"></u-text>
        <u-icon name="calendar" size="36rpx" color="#999"></u-icon>
      </view>

      <!-- 家庭住址	 -->
      <!-- <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="学生家庭住址" bold></u-text>
      <view class="margin-top-sm">
        <u-input customStyle="height:80rpx;border-radius:20rpx" fontSize="32rpx" v-model="formData.address"
          placeholder="请输入学生家庭住址"></u-input>
      </view> -->

      <!-- 毕业院校/专业/教学资格证	 -->
      <u-text margin="60rpx 0 0 0" color="#333" size="32rpx" text="毕业院校/专业/教学资格证" bold></u-text>
      <view class="margin-top-sm">
        <u-input customStyle="height:80rpx;border-radius:20rpx" fontSize="32rpx" v-model="formData.school"
          placeholder="请输入毕业院校"></u-input>
        <u-input customStyle="margin-top:30rpx;height:80rpx;border-radius:20rpx" fontSize="32rpx"
          v-model="formData.school" placeholder="请输入专业"></u-input>
        <u-text margin="24rpx 0 0 0" text="上传教学资格证" size="32rpx" color="#333"></u-text>
        <UploadBox placeholder="点击上传照片" />
      </view>

      <!-- 选择要加入的班级弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showClassPicker" :columns="classList"
        @close="showClassPicker = false" @confirm="handleClassConfirm"></up-picker>

      <!-- 开始时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showStartDate" mode="date" format="YYYY-MM-DD"
        @cancel="showStartDate = false" @confirm="handleStartDateConfirm"></up-datetime-picker>
      <!-- 结束时间选择器 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showEndDate" mode="date" format="YYYY-MM-DD"
        @cancel="showEndDate = false" @confirm="handleEndDateConfirm"></up-datetime-picker>
      <!-- 出生日期 -->
      <up-datetime-picker :closeOnClickOverlay="true" :show="showBirthdate" mode="date" format="YYYY-MM-DD"
        @cancel="showBirthdate = false" @confirm="handleBirthdateConfirm"></up-datetime-picker>

      <!-- 考试类型弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showRecentScoreType" :columns="recentScoreTypeList"
        @close="showRecentScoreType = false" @confirm="handleRecentScoreTypeConfirm"></up-picker>
      <!-- 职务弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showJobPopup" :columns="jobList" @close="showJobPopup = false"
        @confirm="handleJobConfirm"></up-picker>
      <!-- 岗位类型弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showJobTypePopup" :columns="jobTypeList"
        @close="showJobTypePopup = false" @confirm="handleJobTypeConfirm"></up-picker>

      <!-- 任教学科弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showSubjectPopup" :columns="subjectList"
        @close="showSubjectPopup = false" @confirm="handleSubjectConfirm"></up-picker>

      <!-- 教学年级弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showGradePopup" :columns="gradeList" @close="showGradePopup = false"
        @confirm="handleGradeConfirm"></up-picker>

      <!-- 负责班级弹窗 -->
      <up-picker :closeOnClickOverlay="true" :show="showResponsibleClassPopup" :columns="responsibleClassList"
        @close="showResponsibleClassPopup = false" @confirm="handleResponsibleClassConfirm"></up-picker>

    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>

  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
import dayjs from 'dayjs';
import UploadBox from '@/components/UploadBox/index.vue';
const { themePrimary, themeSecondary, themeTertiary } = useTheme();

// 报名周期弹窗
const showStartDate = ref(false)
const showEndDate = ref(false)
const showBirthdate = ref(false)
const showJobPopup = ref(false)
const showJobTypePopup = ref(false)
const showSubjectPopup = ref(false)
const showGradePopup = ref(false)
const showClassPopup = ref(false)
const showResponsibleClassPopup = ref(false)
// 近期成绩录入弹窗
const showRecentScoreType = ref(false)
// 近期成绩录入类型列表
const recentScoreTypeList = ref([['期中考试', '期末考试', '月考', '单元考试']])
// 职务列表
const jobList = ref([['班主任', '助教', '讲师']])
// 岗位类型列表
const jobTypeList = ref([['全职', '兼职']])
// 任教学科列表
const subjectList = ref([['语文', '数学', '英语']])
// 教学年级列表
const gradeList = ref([['一年级', '二年级', '三年级', '四年级', '五年级', '六年级']])
// 责任班级列表
const classList = ref([['托管班：一年级（A）班', '周末班：一年级-数学（A）班']])
// 负责班级列表
const responsibleClassList = ref([['托管班：一年级（A）班', '周末班：一年级-数学（A）班']])

const formData = ref({
  startDate: '',
  endDate: '',
  classInfo: null,
  studentInfo: null,
  birthday: '',
  guardians: [],
  recentScoreType: null, //近期成绩录入类型
  chineseScore: '',
  mathScore: '',
  englishScore: ''
})
// 报名班级弹窗
const showClassPicker = ref(false)

// 性别列表
const sexOptions = ref([
  {
    label: '男',
    value: '男'
  },
  {
    label: '女',
    value: '女'
  }
])

// 开始日期选择器确认
const handleStartDateConfirm = (e) => {
  console.log(e)
  showStartDate.value = false
  formData.value.startDate = e.value
}

// 结束日期选择器确认
const handleEndDateConfirm = (e) => {
  console.log(e)
  showEndDate.value = false
  formData.value.endDate = e.value
}

// 出生日期选择器确认
const handleBirthdateConfirm = (e) => {
  console.log(e)
  showBirthdate.value = false
  formData.value.birthday = e.value
}

// 近期成绩录入类型确认
const handleRecentScoreTypeConfirm = (e) => {
  console.log(e)
  showRecentScoreType.value = false
  formData.value.recentScoreType = e.value[0]
}

// 职务确认
const handleJobConfirm = (e) => {
  console.log(e)
  showJobPopup.value = false
  formData.value.job = e.value[0]
}

// 岗位类型确认
const handleJobTypeConfirm = (e) => {
  console.log(e)
  showJobTypePopup.value = false
  formData.value.jobType = e.value[0]
}

// 任教学科确认
const handleSubjectConfirm = (e) => {
  console.log(e)
  showSubjectPopup.value = false
  formData.value.subject = e.value[0]
}

// 教学年级确认
const handleGradeConfirm = (e) => {
  console.log(e)
  showGradePopup.value = false
  formData.value.grade = e.value[0]
}

// 责任班级确认
const handleClassConfirm = (e) => {
  console.log(e)
  showClassPopup.value = false
  formData.value.class = e.value[0]
}

// 负责班级确认
const handleResponsibleClassConfirm = (e) => {
  console.log(e)
  showResponsibleClassPopup.value = false
  formData.value.responsibleClass = e.value[0]
}

const addGuardian = () => {
  console.log('addGuardian')
  formData.value.guardians.push({
    name: '',
    phone: ''
  })
}
</script>
<style scoped lang="scss">
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F7F7F7;
  padding: 30rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.camera-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 54rpx;
  height: 54rpx;
}
</style>